<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单下拉选择框的三级联动实现</title>
</head>

<body>

    <form>
        <select name="country" onchange="selectCity(this.options[this.selectedIndex].value)">
            <option value="">--请选择国家--</option>
            <option value="China">中国</option>
            <option value="America">美国</option>
            <option value="Japan">日本</option>
        </select>
        <select name="city" id="city" onchange="selectDistrict(this.options[this.selectedIndex].value)">
            <option value="">--请选择城市--</option>
        </select>
        <select name="district" id="district">
            <option value="">--请选择地区--</option>
        </select>
    </form>

    <script>
        // 定义地区数据
        var cityData = {
            China: {
                Beijing: ["东城区", "西城区", "崇文区", "宣武区"],
                Shanghai: ["浦东新区", "徐汇区", "长宁区", "静安区"],
                Guangzhou: ["越秀区", "海珠区", "荔湾区", "天河区"]
            },
            America: {
                Washington: ["Washington DC", "Fairfax", "Arlington"],
                LosAngeles: ["Hollywood", "Beverly Hills", "Westwood Village"],
                NewYork: ["Manhattan", "Brooklyn", "The Bronx"]
            },
            Japan: {
                Tokyo: ["Chiyoda", "Minato", "Shinjuku"],
                Osaka: ["Kita", "Minami", "Sumiyoshi"],
                Kyoto: ["Nakagyo", "Shimogyo", "Kamigyo"]
            }
        };

        // 定义选择城市数据
        function selectCity(country) {
            if (cityData[country]) {
                var citySelect = document.getElementById("city");
                citySelect.options.length = 0;
                citySelect.options.add(new Option("--请选择城市--", ""))
                for (var city in cityData[country]) {
                    citySelect.options.add(new Option(city, city));
                }
            } else {
                document.getElementById("city").options.length = 0;
            }
            selectDistrict("");
        }

        // 定义选择地区数据
        function selectDistrict(city) {
            if (cityData[country]) {
                var districtSelect = document.getElementById("district");
                districtSelect.options.length = 0;
                districtSelect.options.add(new Option("--请选择地区--", ""));
                var districts = cityData[country][city];
                if (districts) {
                    for (var i = 0; i < districts.length; i++) {
                        districtSelect.option.add(new Option(districts[i], districts[i]));
                    }
                }
            } else {
                document.getElementById("district").options.length = 0;
            }
        }
    </script>

</body>

</html>